<template>
  <el-select
    v-model="_value"
    :style="style"
    :placeholder="placeholder"
    :multiple="multiple"
    :clearable="clearable"
    :filterable="filterable"
  >
    <el-option
      v-for="item in state.priorityOptions"
      :key="item.code"
      :label="item.value"
      :value="item.code"
    >
      <span
        class="priority-circle"
        :style="{ background: PRIORITY_CODES[item.code]?.color }"
      ></span>
      <span>{{ item.value }}</span>
    </el-option>
  </el-select>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType, reactive } from 'vue'

import { codeMaps, getByDictCodeList } from '@/api/backend/dict'

import { PRIORITY_CODES } from '@/configs/codeMaps'

const props = defineProps({
  modelValue: {
    type: [String, Number, Array, Object],
    default: '',
  },
  options: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  defaultProps: {
    type: Object,
    default: () => {
      return {
        label: 'value',
        value: 'code',
      }
    },
  },
  modelValueField: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '请选择',
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  filterable: {
    type: Boolean,
    default: false,
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: '100%',
      }
    },
  },
})

const emits = defineEmits(['update:modelValue'])

const _value = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    console.log('val', val)
    emits('update:modelValue', val)
  },
})

const state: any = reactive({
  priorityOptions: [],
})

const getDictData = async () => {
  const ret = await getByDictCodeList([codeMaps.priority])
  state.priorityOptions = ret[codeMaps.priority]
}
getDictData()
</script>

<style lang="scss" scoped>
.priority-circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 50%;
}
</style>
